<template>
<div>
  <el-container>
    <!--<el-header></el-header>-->
    <el-main>
      <el-row>
        <el-col :span="18">
          <el-button type="primary" @click="newcourselession">新增课时</el-button>
          <el-button type="primary" @click="toback">返回</el-button>
        </el-col>
        <el-col :span="6"><p></p></el-col>
      </el-row>
      <br>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          width="40">
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID">
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题">
        </el-table-column>
        <!--<el-table-column-->
          <!--prop="index"-->
          <!--label="index"-->
          <!--width="60">-->
        <!--</el-table-column>-->
        <el-table-column
          prop="course_type"
          label="上课方式">
        </el-table-column>
        <el-table-column
          prop="start_time"
          label="开始时间">
        </el-table-column>
        <el-table-column
          prop="duration"
          label="持续时间">
        </el-table-column>
        <el-table-column prop="video_url" label="视频地址">
          <template scope="scope">
            <el-button @click="show_videos(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="is_living"
          label="课堂状态">
        </el-table-column>
        <el-table-column
          prop="teacher.name"
          label="老师">
        </el-table-column>
        <el-table-column
          prop="assistant.name"
          label="助教">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="myeditor(scope.row)" type="text" size="small">编辑</el-button>
            <template v-if="roles === 'superadmin' ">
              <el-button @click="mydelete(scope.row)" type="text" size="small">删除</el-button>
            </template>
            <template v-else>
              <el-button @click="mydelete(scope.row)" type="text" size="small" disabled>删除</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="编辑课时信息" :visible.sync="dialogFormVisible" width="40%" center>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :label-position="labelPosition">
          <el-form-item label="标题" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="上课方式" prop="course_type">
            <el-select v-model="ruleForm.course_type" placeholder="请选择" style="width: 100%;">
              <el-option label="直播" value="1"></el-option>
              <el-option label="视频" value="2"></el-option>
            </el-select>
          </el-form-item>
          <!--<el-form-item label="课堂状态" prop="is_living">-->
            <!--<el-select v-model="ruleForm.is_living" placeholder="请选择" style="width: 100%;">-->
              <!--<el-option label="正在上课" value="1"></el-option>-->
              <!--<el-option label="没有上课" value="0"></el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
          <el-form-item label="选择老师" prop="teacher">
            <el-select v-model="ruleForm.teacher" placeholder="请选择" style="width: 100%;">
              <el-input placeholder="搜索老师" v-model="searchteacher" class="input-with-select" @input ="searchange">
                <el-button @click="searchteachermethod" slot="append" icon="el-icon-search"></el-button>
              </el-input>
              <el-option
                v-for="item in ruleForm.teachers"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择助教" prop="assistant">
            <el-select v-model="ruleForm.assistant" placeholder="请选择" style="width: 100%;" >
              <el-input placeholder="搜索老师" v-model="searchteacher" class="input-with-select" @input ="searchange">
                <el-button @click="searchteachermethod" slot="append" icon="el-icon-search"></el-button>
              </el-input>
              <el-option
                v-for="item in ruleForm.assistants"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间" required>
            <el-form-item prop="date">
                <el-date-picker type="datetime" placeholder="选择日期和时间" v-model="ruleForm.start_time" style="width: 90%;"></el-date-picker>
              </el-form-item>
            <!--el-col :span="11">
              <el-form-item prop="date">
                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date" style="width: 90%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="time">
                <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.time" style="width: 90%;"></el-time-picker>
              </el-form-item>
            </el-col-->
          </el-form-item>
          <el-form-item label="持续时间" prop="duration">
            <el-input-number v-model="ruleForm.duration" controls-position="right" :min="1" :max="60"></el-input-number>
          </el-form-item>
          <!--<el-form-item label="index" prop="index">-->
            <!--<el-input-number v-model="ruleForm.index" controls-position="right" :min="1" :max="60"></el-input-number>-->
          <!--</el-form-item>-->
          <el-form-item label="视频地址" prop="video_url">
            <el-input v-model="ruleForm.video_url"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm('ruleForm')">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>


    <el-dialog title="zoom录屏地址" :visible.sync="dialogTableVisible" width="100%" center>
       <el-table :data="gridData">
        <el-table-column property="id" label="ID" width="80"></el-table-column>
        <el-table-column property="lession_id" label="课时id" width="80"></el-table-column>
        <el-table-column property="zoom_email" label="zoom邮箱" width="100"></el-table-column>
        <el-table-column property="zoom_pmi" label="zoom pmi" width="100"></el-table-column>
        <el-table-column property="start_time" label="开始时间" width="100"></el-table-column>
        <el-table-column property="stop_time" label="结束时间" width="100"></el-table-column>
        <el-table-column property="videos" label="录屏地址">
          <template scope="scope">
             <p v-for="new_url in scope.row.videos"><a :href="new_url" target="_blank">{{new_url}}</a></p>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</div>
</template>

<script>
    import store from '../../store'
    import { getlession, getteacher, postlession, deletelession, patchlession, getzoomurl } from '@/api/course'
    let datetime = require("date-and-time")
    export default {
      name: 'lessionmanager',
      data() {
        return {
          roles: store.getters.roles[0],
          gridData: [],
          dialogTableVisible: false,
          tableData: [],
          course_id: 0,
          dialogFormVisible: false,
          labelPosition: 'left',
          father_page_num: 0,
          use: 0,
          ruleForm: {
            id: 0,
            title: '',
            course_type: '1',
            start_time: '',
            date: '',
            time: '',
            duration: 40,
            video_url: '',
            is_living: '0',
            teachers: [],
            teacher: '',
            assistants: [],
            assistant: '',
            course_id: 0,
            index: 1
          },
          searchteacher: '',
          rules: {
            title: [
              { required: true, message: '请输入课时标题', trigger: 'blur' }
            ],
            course_type: [
              { required: true, message: '请选择上课方式', trigger: 'change' }
            ],
            /* date: [
              { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
            ],
            time: [
              { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
            ], */
            start_time: [
              { type: 'datetime', required: true, message: '请选择时间', trigger: 'change' }
            ],
            duration: [
              { required: true, message: '请输入持续时间', trigger: 'blur' }
            ],
            is_living: [
              { required: true, message: '请选择课时状态', trigger: 'blur' }
            ],
            // video_url: [
            //   { required: true, message: '请输入上课地址', trigger: 'blur' }
            // ],
            teacher: [
              { required: true, message: '请选择老师', trigger: 'blur' }
            ],
            assistant: [
              { required: true, message: '请输选择助教', trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        getlessioninfo(course_id) {
          getlession(course_id).then(response => {
            const data = response.data
            for (var key in data) {
              if (data[key].course_type === 1) {
                data[key].course_type = '直播'
              } else {
                data[key].course_type = '视频'
              }
              if (data[key].is_living === 1) {
                data[key].is_living = '正在上课'
              } else {
                data[key].is_living = '没有上课'
              }
            }
            this.tableData = data
          }).catch(error => {
            console.log(error)
          })
        },
        getteacherinfo(page, keyword, page_suze) {
          getteacher(page, keyword, page_suze).then(response => {
            const data = response.data
            if (data.length === 0) {
              var nal_data_list = []
              var nal_data = {}
              nal_data.value = 0
              nal_data.label = '没有搜索到数据！'
              nal_data_list.push(nal_data)
              this.ruleForm.teachers = nal_data_list
              this.ruleForm.assistants = nal_data_list
            } else {
              var new_data_list = []
              for (var key in data) {
                var new_data = {}
                new_data.value = data[key].id
                new_data.label = data[key].id + '/' + data[key].name + '/' + data[key].education
                new_data_list.push(new_data)
              }
              this.ruleForm.teachers = new_data_list
              this.ruleForm.assistants = new_data_list
            }
          }).catch(error => {
            console.log(error)
          })
        },
        searchteachermethod() {
          this.getteacherinfo(1, this.searchteacher)
        },
        searchange() {
          this.getteacherinfo(1, this.searchteacher)
        },
        clearFormdata() {
          this.ruleForm = {
            id: 0,
            title: '',
            course_type: '1',
            start_time: '',
            date: '',
            time: '',
            duration: 40,
            video_url: '',
            is_living: '0',
            teachers: [],
            teacher: '',
            assistants: [],
            assistant: '',
            course_id: 0,
            index: 1
          }
        },
        newcourselession() {
          this.getteacherinfo(1, '', 20)
          this.use = 0
          // this.ruleForm.course_id = this.$route.params.course_id
          this.ruleForm.teacher = this.$route.params.teacher_id
          this.ruleForm.assistant = this.$route.params.assistant_id
          this.ruleForm.video_url = '1'
          this.ruleForm.is_living = '0'
          this.ruleForm.duration = 40
          this.ruleForm.video_url = ''
          this.ruleForm.title = ''
          this.ruleForm.date = ''
          this.ruleForm.time = ''
          this.ruleForm.start_time = ''
          // var last_data_length = this.tableData.length
          // if (last_data_length === 0) {
          //   this.ruleForm.index = 1
          // } else {
          //   var last_data = this.tableData[last_data_length - 1]
          //   // console.log(last_data)
          //   this.ruleForm.index = last_data.index + 1
          // }
          this.dialogFormVisible = true
        },
        show_videos (row) {
          console.log(row.id)
          getzoomurl(row.id).then(response => {
            const data = response.data
            this.gridData = data
          }).catch(error => {
            console.log(error)
          })
          this.dialogTableVisible = true
        },
        myeditor(row) {
          this.getteacherinfo(1, '', 20)
          this.use = 1
          this.ruleForm.title = row.title
          this.ruleForm.teacher = row.teacher.id
          this.ruleForm.assistant = row.assistant.id
          this.ruleForm.duration = row.duration
          this.ruleForm.video_url = row.video_url
          if (row.course_type === '直播') {
            this.ruleForm.course_type = '1'
          } else {
            this.ruleForm.course_type = '2'
          }
          // if (row.is_living === '在线') {
          //   this.ruleForm.is_living = '1'
          // } else {
          //   this.ruleForm.is_living = '0'
          // }
          this.ruleForm.id = row.id
          /* var time_str = row.start_time
          var time_list = time_str.split('T')
          var new_date_str = time_list[0].replace(/-/g, '/')
          var newdate = new Date(new_date_str)
          console.log(newdate)
          this.ruleForm.date =  newdate
          var test = time_list[0] + ' ' + time_list[1]
          var new_time_str = test.replace(/-/g, '/')
          var newtime = new Date(new_time_str)
          console.log(newtime)
          this.ruleForm.time = newtime */
          this.ruleForm.start_time = row.start_time
          this.dialogFormVisible = true
        },
        mydelete(row) {
          this.$confirm('是否确认删除该课时, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            var id = row.id
            deletelession(id).then(response => {
              const data = response.data
              console.log(data)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getlessioninfo(this.ruleForm.course_id)
            }).catch(error => {
              console.log(error)
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              var start_time = this.ruleForm.start_time
              if( typeof(start_time) == 'object') {
                // var date = start_time.toLocaleDateString().replace(/\//g,'-')
                // this.ruleForm.birthday = datetime.format(date,"YYYY-MM-DD")
                // var time = start_time.toTimeString().split(" ")[0]
                // this.ruleForm.start_time = date + " " + time
                this.ruleForm.start_time = datetime.format(start_time,"YYYY-MM-DD HH:mm:ss")
              } else {
                this.ruleForm.start_time = start_time.replace("T"," ")
              }
              // var date_str = date.toLocaleDateString()
              // var date_list = date_str.split('/')
              //var time = this.ruleForm.time
              // var time_str = time.toTimeString()
              // var time_str2 = time_str.split(' ')[0]
              // var date_time = ''
              // date_time = date_list[0] + '-' + date_list[1] + '-' + date_list[2] + ' ' + time_str2
              // console.log(date.getTime())
              // console.log(time.getTime())
              // this.ruleForm.course_id = this.$route.params.course_id
              //this.ruleForm.start_time = String(date.getTime()) + ',' + String(time.getTime())
              console.log(this.ruleForm.start_time)
              this.ruleForm.course_type = parseInt(this.ruleForm.course_type)
              this.ruleForm.is_living = parseInt(this.ruleForm.is_living)
              this.ruleForm.teacher_id = this.ruleForm.teacher
              this.ruleForm.assistant_id = this.ruleForm.assistant
              console.log(this.ruleForm)
              if (this.use === 1) {
                patchlession(this.ruleForm).then(response => {
                  const data = response.data
                  console.log(data)
                  this.dialogFormVisible = false
                  this.$message({
                    message: '修改课时成功！',
                    type: 'success'
                  })
                  this.getlessioninfo(this.ruleForm.course_id)
                  this.$refs[formName].resetFields()
                }).catch(error => {
                  console.log(error)
                })
              } else {
                postlession(this.ruleForm).then(response => {
                  const data = response.data
                  console.log(data)
                  this.dialogFormVisible = false
                  this.$message({
                    message: '新增课时成功！',
                    type: 'success'
                  })
                  this.getlessioninfo(this.ruleForm.course_id)
                  this.$refs[formName].resetFields()
                }).catch(error => {
                  console.log(error)
                })
              }
            } else {
              console.log('error submit!!')
              return false
            }
          })
        },
        resetForm(formName) {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
          // this.$refs[formName].resetFields()
          this.dialogFormVisible = false
          this.clearFormdata()
        },
        toback() {
          var pagenum = this.father_page_num
          this.$router.push({ name: 'cousermanager', params: { pagenum: pagenum }})
        }
      },
      created: function() {
        this.ruleForm.course_id = this.$route.params.course_id
        this.ruleForm.teacher = this.$route.params.teacher_id
        this.ruleForm.assistant = this.$route.params.assistant_id
        this.father_page_num = this.$route.params.page
        this.getlessioninfo(this.ruleForm.course_id)
        // this.getteacherinfo(1, '', 100)
      }
    }
</script>

<style scoped>

</style>
